<template>
  <el-input :prefix-icon="currentIconName" readonly v-model="currentIconName" @click="openDialog" placeholder="" />
  <el-dialog
      v-model="iconDialogVisible"
      title="请选择图标"
      width="520"
      :before-close="handleClose"
  >
    <div class="icon-select-main">
      <div v-for="(name,index) in icons" :index="index" :key="index" style="cursor: pointer; display: flex; justify-content: center; align-items: center; width: 60px;height:60px; border: 1px solid rgb(227,232,232);"
           :class="keepIconName === name ? 'red' : ''"
           @click="keepIconName = name"
      >
        <component :is="name" style="width: 30px;height: 30px;"></component>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="iconDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleOk">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import * as ElIcons from '@element-plus/icons-vue'
import {ref} from "vue";

  interface Props {
    modelValue?: string
  }
  const emit = defineEmits(['update:modelValue'])
  const props = withDefaults(defineProps<Props>(), {
    modelValue: '',
  })

  const iconDialogVisible = ref<boolean>(false)
  const currentIconName = ref<string>(props.modelValue)
  const keepIconName = ref<string>(props.modelValue)
  const icons = ref<any>([])
  const getData = () => {
    for (const name in ElIcons) {
      icons.value.push(name)
    }
  }

  const openDialog = () => {
    keepIconName.value = currentIconName.value
    iconDialogVisible.value = true
  }

  const handleClose = () => {
    iconDialogVisible.value = false
  }

  const handleOk = () => {
    currentIconName.value = keepIconName.value
    emit(`update:modelValue`, currentIconName.value);
    handleClose()
  }

  getData()
</script>

<style lang="scss" scoped>
.red{
  background-color: var(--el-color-primary);
  color: white;
}
.icon-select-main{
  display: flex;
  flex-wrap: wrap;
  height:400px;
  overflow: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
</style>


